<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>rout</title>

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	href="assets/css/bootstrap.min.css" />
<!-- 나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome-ie7.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome-4.0.3/css/font-awesome.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/rout.css">
<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->

</head>



<body>

	<!-- 팝업창 -->
	<div id="myModal" class="modal fade" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true"
		data-backdrop="false">
		<div class="modal-dialog">

			<!--내용 영역 -->
			<div class="modal-body">
				<p>알람을 설정 하시겠습니까??</p>
			</div>
			<!--하단 영역 -->
			<div class="modal-footer">
				<button type="button" class="btn btn-inverse nav_btns"
					data-dismiss="modal">NO</button>
				<button type="button" class="btn btn-inverse nav_btns"
					onclick="location.replace('index.jsp'); return false;">YES</button>
			</div>
		</div>
	</div>


	<!-- 상단 해더 바 -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container text-center">
			<div class="pull-right">
				<a href="#myModal" data-toggle="modal" class="btn btn-info nav_btns">홈</a>
			</div>
			<span>경로이동</span>
			<div class="pull-left">
				<button class="btn btn-inverse nav_btns" onclick="history.back();">
					<i class="icon-arrow-left"></i>
				</button>
			</div>
		</div>
	</nav>
	<!-- 안내 바 -------------------------------------------------------->
	<div class="clock">
		<!-- 스크립트로 들어간다 시발 -->
	</div>
	<hr />


	<!-- 루트에대한 큰 박스 -->
	<div class="rout-box">
		<!-- 루트에대한 작은 박스 -->
		<!-- 스크립트로 들어간당 ^_^히이힛 -->
	</div>
	<div class="list-box panel-group">
		<!-- 스크립트로 들어간당 ^____^ 이히힛 -->
	</div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var key = localStorage.key(localStorage.length - 1);
		var legs = JSON.parse(localStorage[key]);

		var al_info = sessionStorage["al_info"].split(",");
		var is_al = sessionStorage["is_al"].split(",");
		
		
		/************************************************************/
		/* 	[date함수 호출]
			시간 알람의 활성화 여부를 알기 위한 date함수 호출					*/
		/************************************************************/
		var time = new Date();
		var hh = time.getHours(); // 현재 시
		var mm = time.getMinutes(); // 현재 분

		var dt = legs.departure_time.text.split(' ');
		var dtime = dt[1].split(':');
		var ampm = dt[0]; //출발 시간의 오전오후 변수
		var dhh = dtime[0]; // 출발 시간의 시
		var dmm = dtime[1]; // 출발 시간의 분
		if (ampm == '오후') {
			if (dhh == 12) {
				dhh = 12;
			} else {
				dhh = Number(dhh) + 12;
			}
		} else if (ampm == '오전') {
			if (dhh == 12) {
				dhh = 0;
			}
		}
		
		//////////////////////////////////////
		/*             거리계산             */
			
		function toRadians(degree){
			return degree * Math.PI /180;
		}

		function distance(latitude1,longitude1,latitude2,longitude2){
			//R은 지구 반지름을 킬로미터로 환산한 값
			var R = 6378.1;
			var deltaLatitude = toRadians(latitude2-latitude1);
			var deltaLongitude = toRadians(longitude2-longitude1);
			latitude1 = toRadians(latitude1);
			latitude2 = toRadians(latitude2);

			var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);
			var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
			var d = R * c;

			return d ;
		}
		

		
		if(navigator.geolocation)
		{
		    navigator.geolocation.getCurrentPosition(
		        // successCallback
		        function(position) {
		            alert( "위도: " + position.coords.latitude );  // 위도
		            alert( "경도: " + position.coords.longitude ); // 경도
		            $(function() {
		    			for (var i = 0; i< legs.steps.length-1; i++ ){
		    			var dis = distance(position.coords.latitude , position.coords.longitude , legs.steps[i].end_location.nb , legs.steps[i].end_location.ob);
		    			alert(legs.steps[i].end_location.nb);
		    			alert(legs.steps[i].end_location.ob);
		    			
		    			
		    			
		    				alert(dis);
		    			
		    			}
		    			
		    			
		    		});
		        }, 
		        // errorCallback
		        function(error)
		        {
		            switch(error.code) 
		            {    
		                case error.TIMEOUT:
		                    alert ('시간 초과');
		                    break;
		                case error.POSITION_UNAVAILABLE:
		                    alert ('위치를 사용할 수 없음 (이 오류는 위치 정보 공급자가 응답)');    
		                    break;
		                case error.PERMISSION_DENIED: 
		                    alert ('권한 거부');
		                    break;
		                case error.UNKNOWN_ERROR:    
		                    alert ('알 수 없는 오류');
		                    break;
		                default : 
		                    alert ( errro.code);
		            }
		        });
		}
		else
		{
		    alert("이 브라우저는 geolcation API를 지원하지 않습니다");
		}
		
		//////////////////////////////////////
		






		$(function() {

			var htmltxt2 = '';
			//어썸 htmltxt2 += '<div class="fa fa-play fa2"></div>';
			for (var i = 0; i < legs.steps.length; i++) {
				htmltxt2 += '<div class="metro-image">';
				if (legs.steps[i] == legs.steps[0]) {
					htmltxt2 += '<div class="start">' + sessionStorage["sl"]
							+ '</div>';
				} else if (legs.steps[i].transit != null) {
					htmltxt2 += '<div class="hwan1">'
							+ legs.steps[i].transit.departure_stop.name
							+ '</div>';
					htmltxt2 += '<div class="hwan2">'
							+ legs.steps[i].transit.arrival_stop.name
							+ '</div>';
				} else if (legs.steps[i] == legs.steps[legs.steps.length - 1]) {
					htmltxt2 += '<div class="end">' + sessionStorage["el"]
							+ '</div>';
				} else {
					htmltxt2 += '<div>' + legs.steps[i].instructions + '</div>';
				}

				htmltxt2 += '</div>';
			}

			$('.rout-box').html(htmltxt2);


			
			var htmltxt = '';
			for (var i = 0; i < legs.steps.length + 1; i++) {
				
				var ald = al_info[i];
				var althum = is_al[i];
				if (althum == 1) {
					var thum = "text-danger";
				} else {
					var thum = "text-muted";
				}
				htmltxt += '<div class="list-case">';
				htmltxt += '<div class="container">';
				htmltxt += '<div>';
				htmltxt += '<div class="panel-heading">';
				htmltxt += '<div class="panel-title">';
				htmltxt += '<div>';

				/************************************************************/
				/* 	[출발지 알람]
					출발지에서 출발하기전 시간값으로 구현되는 리스트						*/
				/************************************************************/
				if (i == 0) {
					if (is_al[0]==0) {
					htmltxt += '<span id="alth_box"><span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span></span>';
					} else {
					htmltxt += '<span id="alth_box"><a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a></span>';
					}
					// 리스트 전체를 감싸는 a 태그
					htmltxt += '<a class="list-inner'
							+ i
							+ ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse'
							+ i + '" onclick="setColhidden(' + i + ')">';
					htmltxt += '<div>';
					htmltxt += '<span class="text-muted">Step. ' + (i + 1)
							+ ' </span>';
					// 아이콘 이프문
					if (legs.steps[i].travel_mode == ("WALKING")) {
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
					} else {
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
					}
					htmltxt += '</div>'; // 설정없는 div 박스 끝

					htmltxt += '<div class="loca-name">';
					// 아이콘 이프문
					if (legs.steps[i].travel_mode == ("WALKING")) {
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
					} else {
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
					}
					htmltxt += sessionStorage.getItem("sl") + '에서 출발';
					htmltxt += '</div>'; // <div class="loca-name"> 끝
					htmltxt += '<div>출발예정시간: <strong>'
							+ legs.departure_time.text + '</strong></div>';
					if (is_al[0]==0) {
					htmltxt += '<div id="alinfotxt"><span>알람설정: <span class="text-warning">알람을 설정할 수 없는 출발시간 입니다.</span></span></div>';
					} else {
					htmltxt += '<div id="alinfotxt"><span>알람설정: 출발 <span id="altime' + i + '" class="text-warning">'+ald+'분 전</span></span></div>';
					}
					htmltxt += '</a>' // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
				} else { // i가 0이 아닐 때, steps에는 -1
					/************************************************************/
					/* 	[알람 온/오프 섬네일]
						알람을 온/오프상태를 표지해주는 섬네일을 조건에 따라 표시해준다.		*/
					/************************************************************/
					if (legs.steps[i - 1].travel_mode != ("WALKING")) {
						htmltxt += '<a id="althumb' + i
								+ '" class="alarm-thumbnail ' + thum
								+ '" onclick="setAlthumb(' + i
								+ ')"><i class="fa fa-clock-o"></i></a>';
					} else {
						htmltxt += '<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';
					}
					/************************************************************/
					// 리스트 전체를 감싸는 a 태그
					htmltxt += '<a class="list-inner'
							+ i
							+ ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse'
							+ i + '" onclick="setColhidden(' + i + ')">';

					/************************************************************/
					/* 	[stpes의 travel_mode 표시]
						스탭의 번호와 이동모드를 아이콘으로 표시해준다.
						
						legs.steps[i].travel_mode == ("WALKING")일 경우 아이콘의
						경로가 sessionstorage에 없기 때문에 직접 작성해 준다.				*/
					/************************************************************/
					htmltxt += '<div>';
					htmltxt += '<span class="text-muted">Step. ' + (i + 1)
							+ ' </span>';
					if (legs.steps[i - 1].travel_mode == ("WALKING")) {
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
					} else {
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
					}
					htmltxt += '</div>';

					/********** 각 스탭들 내용 *********/
					if (legs.steps[i - 1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
						htmltxt += '<div class="loca-name">';
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						htmltxt += legs.steps[i - 1].transit.departure_stop.name
								+ '에서 ';
						htmltxt += '<span class="icon-pos2" style="background-color:' + legs.steps[i-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>'
								+ legs.steps[i - 1].transit.line.short_name
								+ '</strong></span>'
								+ legs.steps[i - 1].instructions + ' ';
						htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						htmltxt += legs.steps[i - 1].transit.arrival_stop.name
								+ ' 하차 ' + legs.steps[i - 1].duration.text;
						htmltxt += '</div>';
						htmltxt += '<div>출발예정시간: <strong>'
								+ legs.steps[i - 1].transit.departure_time.text
								+ '</strong></div>';
						htmltxt += '<div><span>알람설정: <img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">'
								+ legs.steps[i - 1].transit.arrival_stop.name
								+ ' 도착 <span id="altime' + i +'" class="text-warning">'
								+ ald + 'm 전</span></span></div>';
					} else { // 만약 도보일 경우 리스트
						if (i == 1) {
							htmltxt += '<div class="loca-name">';
							htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
							htmltxt += sessionStorage.getItem("sl") + '에서 ';
							htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
							htmltxt += legs.steps[i - 1].instructions + ' '
									+ legs.steps[i - 1].duration.text;
							htmltxt += '</div>';
							htmltxt += '<div>출발예정시간: <strong>'
									+ legs.departure_time.text
									+ '</strong></div>';
							htmltxt += '<div><span>알람설정: <span id="altime' + i + '" class="text-warning">도보 이동시 알람을 설정할 수 없습니다.</span></span></div>';
						} else {
							htmltxt += '<div class="loca-name">';
							htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-2].transit.line.vehicle.icon + '">';
							htmltxt += legs.steps[i - 2].transit.arrival_stop.name
									+ '에서 ';
							if (i + 1 < legs.steps.length + 1) {
								htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
								htmltxt += legs.steps[i - 1].instructions + ' '
										+ legs.steps[i - 1].duration.text;
							} else { // 마지막 스탭일 경우
								htmltxt += '도착지 ';
								htmltxt += sessionStorage.getItem("el")
										+ '까지 이동 '
										+ legs.steps[i - 1].duration.text;
							}
							htmltxt += '</div>';
							htmltxt += '<div>출발예정시간: <strong>'
									+ legs.steps[i - 2].transit.arrival_time.text
									+ '</strong></div>';
							htmltxt += '<div><span>알람설정: <span id="altime' + i +'" class="text-warning">도보 이동시 알람을 설정할 수 없습니다.</span></span></div>';
						}

					}
					htmltxt += '</a>'; // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
				} // i가 0이 아닌, else문 종료						
				htmltxt += '</div>';
				htmltxt += '</div>'; // <div class="panel-title"> 끝
				htmltxt += '</div>'; // <div class="panel-heading"> 끝	

				htmltxt += '</div>'; // div 박스 끝
				htmltxt += '</div>'; // <div class="container"> 끝
				htmltxt += '</div>'; // <div class="list-case"> 끝

			}
			


			///////////////////////////////////////////////////////////////////
			/*
			 for (var i = 0; i < legs.steps.length; i++) {
			 var ald = al_info[i];
			 var althum = is_al[i];
			 if (althum == 1) {
			 var thum = "text-danger";
			 } else {
			 var thum = "text-muted";
			 }
			 htmltxt += '<div class="list-case">';
			 htmltxt += '<div class="container">';
			 htmltxt += '<div>';
			 htmltxt += '<div class="panel-heading">';
			 htmltxt += '<div class="panel-title">';
			 htmltxt += '<div>';
			 if (legs.steps[i].travel_mode != ("WALKING") || i == 0) {
			 htmltxt += '<a id="althumb' + i
			 + '" class="alarm-thumbnail ' + thum
			 + '" onclick="b(' + i
			 + ')"><i class="fa fa-clock-o"></i></a>';
			 } else {
			 htmltxt += '<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';
			 }

			 htmltxt += '<a class="list-inner'
			 + i
			 + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse'
			 + i + '" onclick="c(' + i + ')">';
			 htmltxt += '<div>';
			 htmltxt += '<span class="text-muted">Step. ' + (i + 1)
			 + ' </span>';
			 if (legs.steps[i].travel_mode == ("WALKING")) {
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
			 } else {
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
			 }
			 htmltxt += '</div>';
			 if (i == 0) { // 첫번째 스탭
			 htmltxt += '<div class="loca-name">';
			 if (legs.steps[i].travel_mode == ("WALKING")) {
			 htmltxt += sessionStorage.getItem("sl") + '에서 ';
			 if (i + 1 < legs.steps.length) {
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i+1].transit.line.vehicle.icon + '">';
			 }
			 htmltxt += legs.steps[i].instructions + ' '
			 + legs.steps[i].duration.text;
			 } else {
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
			 htmltxt += legs.steps[i].transit.departure_stop.name
			 + '에서 ';
			 htmltxt += '<span class="icon-pos2" style="background-color:' + legs.steps[i].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>'
			 + legs.steps[i].transit.line.short_name
			 + '</strong></span>'
			 + legs.steps[i].instructions + ' ';
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
			 htmltxt += legs.steps[i].transit.arrival_stop.name
			 + ' 하차 ' + legs.steps[i].duration.text;
			 }
			 htmltxt += '</div>';
			 htmltxt += '<div>출발예정시간: <strong>'
			 + legs.departure_time.text + '</strong></div>';
			 htmltxt += '<div><span>알람설정: 출발 <span id="altime' + i + '" class="text-warning">'
			 + ald + ' 분 전</span></span></div>';
			 } else { // 첫번째 스탭 제외한 나머지 경로
			 if (legs.steps[i].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
			 htmltxt += '<div class="loca-name">';
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
			 htmltxt += legs.steps[i].transit.departure_stop.name
			 + '에서 ';
			 htmltxt += '<span class="icon-pos2" style="background-color:' + legs.steps[i].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>'
			 + legs.steps[i].transit.line.short_name
			 + '</strong></span>'
			 + legs.steps[i].instructions + ' ';
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
			 htmltxt += legs.steps[i].transit.arrival_stop.name
			 + ' 하차 ' + legs.steps[i].duration.text;
			 htmltxt += '</div>';
			 htmltxt += '<div>출발예정시간: <strong>'
			 + legs.steps[i].transit.departure_time.text
			 + '</strong></div>';
			 if (althum == 1) {
			 htmltxt += '<div><span>알람설정: <img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">'
			 + legs.steps[i].transit.arrival_stop.name
			 + ' 도착 <span id="altime' + i +'" class="text-warning">'
			 + ald + 'm 전</span></span></div>';
			 } else {
			 htmltxt += '<div><span>알람설정: <img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">'
			 + legs.steps[i].transit.arrival_stop.name
			 + ' 도착 <span id="altime' + i +'" class="text-warning">이 경로에서는 알람을 설정하지 않았습니다.</span></span></div>';
			 }
			 } else { // 만약 도보일 경우 리스트
			 htmltxt += '<div class="loca-name">';
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
			 htmltxt += legs.steps[i - 1].transit.arrival_stop.name
			 + '에서 ';
			 if (i + 1 < legs.steps.length) {
			 htmltxt += '<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i+1].transit.line.vehicle.icon + '">';
			 htmltxt += legs.steps[i].instructions + ' '
			 + legs.steps[i].duration.text;
			 } else { // 마지막 스탭일 경우
			 htmltxt += '도착지 ';
			 htmltxt += sessionStorage.getItem("el") + '까지 이동 '
			 + legs.steps[i].duration.text;
			 }
			 htmltxt += '</div>';
			 htmltxt += '<div>출발예정시간: <strong>'
			 + legs.steps[i - 1].transit.arrival_time.text
			 + '</strong></div>';
			 htmltxt += '<div><span>알람설정: <span id="altime' + i +'" class="text-warning">이 경로에서는 알람을 설정할 수 없습니다.</span></span></div>';
			 }

			 }
			 htmltxt += '</a>';
			 htmltxt += '</div>';
			 htmltxt += '</div>';
			 htmltxt += '</div>';
			 htmltxt += '</div>';
			 htmltxt += '</div>';
			 htmltxt += '</div>';

			 }
			 */

			$('.list-box').html(htmltxt);

			var htmltxt3 = '';
			htmltxt3 += '<div class="text-center sub-header-box">';
			htmltxt3 += '<span>출발시간 <strong id="dep-time">'
					+ legs.departure_time.text
					+ '</strong> 도착시간 <strong';
			htmltxt3 += 		' id="arr-time">'
					+ legs.arrival_time.text + '</strong>';
			htmltxt3 += '</span>';
			htmltxt3 += '</div>';

			$('.clock').html(htmltxt3);

		});
		
		

		/*
		var inter = null;
		function times() { //CurrentTime 함수입니다.
			//시간 알람 설정부분
			var oDate = new Date();//Date() 메소드로 객채를 만듭니다.
			cHour = oDate.getHours();//oDate 객채에서 시에 대한 정보를 가져옵니다.
			cMin = oDate.getMinutes();//oDate 객채에서 분에 대한 정보를 가저옵니다.
			cSec = oDate.getSeconds();//oDate 객채에서 초에 대한 정보를 가저옵니다.

			//입력받은 알람시간 부분의 AlMin정보를 가져와 Number 를 이용해 숫자형식으로 변경해줍니다.
			alt = parseFloat(al_info[0]);
			var nAlMin = cMin + alt;

			//
			var array_data = legs.departure_time.text.split(" ");

			var ap = array_data[0];
			var time = array_data[1].split(":");
			var hour = time[0];
			var min = time[1];
			hour = parseFloat(hour);
			min = parseFloat(min);
			if (ap == "오후") {
				hour = hour + 12;
			}
			alert(nAlMin);

			/* 현재의 시간(cHour) 과 알람시간(nAlHour) 이 같고 또 현재의 분(cMin ) 과 알람 분(nAlMin) 이 같
			으면 알림메세지 를 보여줍니다. */
		/*
		 if (cHour == hour && min == nAlMin) {
		 alert("알림입니다!");
		 clearInterval(refreshIntervalId);
		 }

		 };
		 var refreshIntervalId = setInterval("times()", 5000);
		 */

		/* later */
		
	</script>







</body>
</html>